<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/index.js"></script>
    <title>全球新冠大数据</title>

</head>
<body>
<p style="width: 100%;text-align: center;font-size: 30px;margin-top: 30px;">全球新型冠状病毒实时数据统计</p>
<!--<div style="width: 1000px;background: #8080806b;margin: auto; margin-top: 50px; height: 250px; border-radius: 9px;">-->
<!--    <p style="font-size: 45px;margin-left: 30px;">总数：<text id="sum">加载中...</text></p>-->
<!--    <p style="margin-left: 30px;">时间：<text id="time">加载中...</text></p>-->
<!--    <p style="margin-left: 30px;">每日新增：<text id="new_add">加载中...</text></p>-->
<!--</div>-->
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel progress-bar-danger" style="height: 305px;    margin-top: 10px;">
            <div style="margin: 10px;">
                <div style="text-align: center;">
                    <p style="font-size: 45px;margin-left: 30px;">全球总确诊数：<text id="sum">loading</text>
                </div>

                <hr>
                <p><span  style="  font-size: 20px; font-weight: bolder;">新增病例数：<text id="new_add">loading</text></span></p>
                <p><span  style="font-size: 20px;font-weight: bolder;">更新时间：<text id="time">loading</text></span></p>

            </div>
        </div>
<div style="width: 1000px;margin: auto;margin-top: 30px;">
    <p>提示：按回车键即可查询</p>
    <table id="table"
           data-toggle="table"
           >
        <thead>
        <tr>
            <th>prefecture</th>
            <th>country</th>
            <th>total</th>
            <th>Newly added</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
    $('#table').bootstrapTable({
        url:"http://localhost:8080/findAll",
        search: true,
        method: "get",
        searchOnEnterKey: true,
        columns:[{
            field: 'state',
            title: 'prefecture'
        }, {
            field: 'country',
            title: 'country'
        }, {
            field: 'totalcase',
            title: 'total'
        },{
            field:'newcase',
            title:'Newly added'
        }]
    })
    $.ajax({
        url:"http://localhost:8080/findSum",
        type:"GET",
        dataTypr:"json",
        async:false,
        success:function (data) {
            if(data!=null){
                console.log(data);
                $('#sum').text(data.sum);
                $('#time').text(data.date);
                $('#new_add').text(data.newcase);
            }
        }
    })
</script>
</html>